<template>
  <div id="activeProfile">
    <h1 class="con-right-title">
      数据更新至昨日
    </h1>
    <div class="statistics-wrap">
      <div class="statistics-wrap__item">
        <span>访客数（UV）</span>
        <span>{{ uvCount || 0 }}</span>
      </div>
      <div class="statistics-wrap__item">
        <span>访问次数（PV）</span>
        <span>{{ pvCount || 0 }}</span>
      </div>
      <div class="statistics-wrap__item">
        <span>分享次数</span>
        <span>{{ clickNumCount || 0 }}</span>
      </div>
    </div>
    <div class="echart-wrap">
      <div id="myEcharts"></div>
      <div class="search-wrap">
        <el-form :inline="true">
          <el-form-item>
            <el-date-picker
              v-model="selectTime"
              type="datetimerange"
              size="mini"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              @change="getTime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="search">
              查询
            </el-button>
            <el-button type="success" plain @click="reset">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { summaries, activeShow } from '@/api/activeList'

export default {
  name: 'profile',
  watch: {
    selectTime: {
      immediate: true,
      handler(newV, oldV) {
        if (newV == null) {
          this.time.endTime = ''
          this.time.startTime = ''
        } else {
          this.time.endTime = newV[1]
          this.time.startTime = newV[0]
        }
      },
      deep: true
    }
  },
  data() {
    return {
      activeId: '',
      time: {
        endTime: '',
        startTime: ''
      },
      selectTime: [],
      initEcharts: null,
      option: {
        title: {
          text: '访问指标'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: []
      },
      clickNumCount: '',
      pvCount: '',
      uvCount: ''
    }
  },
  created() {
    this.activeId = this.$route.query.id
  },
  mounted() {
    this.echartsInit()
    this.handleActiveShow()
    this.getData()
  },
  methods: {
    reset() {
      this.selectTime = []
      this.time.endTime = ''
      this.time.startTime = ''
    },
    handleActiveShow() {
      let obj = {}
      activeShow(
        this.activeId,
        obj,
        (res) => {
          this.uvCount = res.uvCount
          this.pvCount = res.pvCount
          this.clickNumCount = res.clickNumCount
        },
        (err) => {}
      )
    },
    search() {
      this.getData()
    },
    getTime(val) {
      this.time.startTime = val[0]
      this.time.endTime = val[1]
    },
    getData() {
      let _this = this
      let obj = {
        ...this.time
      }
      summaries(
        this.activeId,
        obj,
        (res) => {
          _this.option.xAxis.data = res.data
          res.series.forEach((item) => {
            item.type = 'line'
            if (item.name == 'UV') {
              item.name = '访客数(UV)'
            } else if (item.name == 'PV') {
              item.name = '访问次数(PV)'
            } else {
              item.name = '分享次数'
            }
          })
          _this.option.series = res.series
          _this.option.legend.data = res.series.map((item) => {
            return item.name
          })
          this.$nextTick(() => {
            _this.initEcharts.setOption(_this.option)
          })
        },
        (err) => {}
      )
    },
    echartsInit() {
      this.initEcharts = this.echarts.init(document.getElementById('myEcharts'))
      let _this = this
      $(window).resize(function() {
        //这里写内容
        _this.initEcharts.resize()
      })
      this.initEcharts.setOption(this.option)
    }
  }
}
</script>

<style lang="less" scoped>
#activeProfile {
  font-size: 20px;
  .statistics-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    .statistics-wrap__item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  .echart-wrap {
    display: flex;
    padding-top: 30px;
    #myEcharts {
      width: 1000px;
      height: 400px;
    }
    .search-wrap {
      flex: 1;
    }
  }
}
</style>
